<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图形显示鼠标点击位置</title>
		<style>
			#big{
				width: 400px;
				height: 400px;
				background: black;
				position: absolute;
			}
			#small{
				width: 400px;
				height: 50px;
				background: orange;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="big">
		<div id="small"></div>
		</div>
		<script>
		var samll=document.getElementById('samll');
		var big=document.getElementById('big');
		var x1;
		var y1;
		var x2=0;
		var y2=0;
		samll.onclick=function(){		
			 x1=event.pageX;
			 y1=event.pageY;
			
		}
		samll.onmouseover=function(){
			 x2=event.pageX;
			 y2=event.pageY;
			 big.style.top=y2-y1+ 'px';
		     big.style.left=x2-x1+ 'px';
		}
		
		
		
</script>
	</body>
</html>
